<template>
    <n-card title="应用管理">
        <template #header-extra>
            <TableTool @add="onEdit" />
        </template>
        <Table ref="tableRef" :config="tableConfig" :data="list" />
    </n-card>

    <AppEdit
        v-model:show="showEdit"
        :data="editData"
        @success="onEditSuccess"
    />
</template>

<script setup lang="ts">
import { coreAppDelete } from '@/apis/core/app'
import { DeleteButton, EditButton } from '@/components/button'
import { TableConfig, Table, TableTool } from '@/components/table'
import { ICoreApp } from '@/types/core/app'
import { NSpace, DataTableInst, NTag, NButton } from 'naive-ui'
import { h, onMounted, ref } from 'vue'
import { appStateOptions, appTypeOptions } from './options'
import { useCoreAppStore } from '@/store'
import { ArrowRightAltRound } from '@vicons/material'
import { useRoute, useRouter } from 'vue-router'
import AppEdit from './components/AppEdit.vue'
import { storeToRefs } from 'pinia'

const appStore = useCoreAppStore()
const router = useRouter()
const route = useRoute()

const { list } = storeToRefs(appStore)
onMounted(() => {
    appStore.getList()
})

const tableRef = ref<DataTableInst>()
const tableConfig: TableConfig<ICoreApp> = {
    params: false,
    columns: [
        {
            title: 'ID',
            key: 'id'
        },
        {
            key: 'name',
            title: '名称'
        },
        {
            key: 'type',
            title: '类型',
            render(rowData) {
                const type = appTypeOptions.find(
                    (item) => item.value === rowData.type
                )
                return h(
                    NTag,
                    {
                        bordered: false,
                        size: 'small',
                        type: type?.theme
                    },
                    {
                        default: () => type?.label
                    }
                )
            }
        },
        {
            key: 'state',
            title: '状态',
            render(rowData) {
                const state = appStateOptions.find(
                    (item) => item.value === rowData.state
                )
                return h(
                    NTag,
                    { size: 'small', type: state?.theme, bordered: false },
                    { default: () => state?.label }
                )
            }
        },
        {
            key: '_actions',
            title: '操作',
            width: 240,
            render(rowData) {
                return h(
                    NSpace,
                    {},
                    {
                        default: () => [
                            h(DeleteButton, {
                                service: () =>
                                    coreAppDelete({ id: rowData.id }),
                                onDone: () => appStore.getList(true),
                                buttonProps: {
                                    // @ts-ignore
                                    disabled: rowData._protect
                                }
                            }),
                            h(EditButton, {
                                onClick: () => onEdit(rowData)
                            }),
                            h(
                                NButton,
                                {
                                    size: 'tiny',
                                    type: 'warning',
                                    iconPlacement: 'right',
                                    onClick: () =>
                                        router.push({
                                            name: `${<string>route.name}-:id`,
                                            params: {
                                                id: rowData.id
                                            }
                                        })
                                },
                                {
                                    default: () => '应用配置',
                                    icon: () => h(ArrowRightAltRound)
                                }
                            )
                        ]
                    }
                )
            }
        }
    ]
}

const showEdit = ref(false)
const editData = ref<ICoreApp>()
function onEdit(rowData?: ICoreApp) {
    if (rowData) {
        editData.value = rowData
    } else {
        editData.value = undefined
    }

    showEdit.value = true
}
function onEditSuccess() {
    appStore.getList(true)
}
</script>
